@import 'utils';
@import url('https://fonts.googleapis.com/css?family=Righteous|Vollkorn');
.IndexComp {
  height: 100%;
  width: 100%;
  background-color: $oc-gray-1;
  display: flex;
  /* Inclusive and exclusive operators for a finer control over the intervals */
  @include media('<=medium') {
    flex-direction: column-reverse;
  }

  height: calc(100% - 20px);
}

.left-panel {
  font-family: 'Vollkorn';
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30%;
  @include media('<=large') {
    width: 100%;
    display: none;
  }
  color: #fff;
  background-color: $oc-gray-8;
  text-align: center;
}
.right-panel {
  font-family: 'Righteous';
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70%;
  @include media('<=large') {
    width: 100%;
    height: calc(100% - 20px);
  }
}
.footer {
  height: 20px;
  justify-items: flex-end;
  background-color: $oc-gray-1;
}
.logo-name {
  display: flex;
  align-items: center;
  @include media('<=small') {
    flex-direction: column;
  }
}
.link-menu {
  display: flex;
  justify-items: space-between;
  width: 10rem;
}
.Face {
  margin: 1rem;
  border: 1px solid #6062a6;
  border-radius: 50%;
  width: 115px;
  height: 115px;
}
